import React, { Component } from 'react'
import { Layout, Menu, Icon } from 'antd'
import { withRouter } from 'react-router-dom'
import './AppFrame.less'
import routes from '@/routes'
import { connect } from 'react-redux'
const { Header, Content, Sider } = Layout
const navRoutes = routes.filter(route => route.isNav === true)
// 装饰器的写法 需要安装babel插件npm install --save-dev babel-plugin-transform-decorators-legacy
const mapState = state => {
  return {
    counter: state.count.counter
  }
}

@connect(mapState)
@withRouter
export default class AppFrame extends Component {
  static getDerivedStateFromProps(props) {
    //console.log(props)
    const selectedKey =
      `/${props.location.pathname.split('/').reverse()[0]}` || navRoutes[0].path
    return {
      selectedKey
    }
  }
  constructor() {
    super()
    this.state = {
      selectedKey: navRoutes[0].path
    }
  }
  handleMenuItemClick = ({ key }) => {
    // console.log(key)
    this.props.history.push(key)
  }
  render() {
    console.log(this.props)
    return (
      <Layout className="r-layout">
        <Header className="header">
          <div className="logo">
            Hello world + 后台管理<span>{this.props.counter}</span>
          </div>
        </Header>
        <Layout>
          <Sider width={200} style={{ background: '#fff' }}>
            <Menu
              onClick={this.handleMenuItemClick}
              theme="light"
              mode="inline"
              selectedKeys={[this.state.selectedKey]}
              defaultOpenKeys={['sub1']}
              style={{ height: '100%', borderRight: 0 }}
            >
              {navRoutes.map(route => {
                return (
                  <Menu.Item key={route.path}>
                    <Icon style={{ fontSize: '16px' }} type={route.iconType} />
                    {route.title}
                  </Menu.Item>
                )
              })}
            </Menu>
          </Sider>
          <Layout style={{ padding: '32px' }}>
            <Content
              style={{
                background: '#fff',
                padding: 24,
                margin: 0,
                minHeight: 280
              }}
            >
              {this.props.children}
            </Content>
          </Layout>
        </Layout>
      </Layout>
    )
  }
}
